<template>
  <div>
    <el-main>
      <el-row v-if="!createHand">
        <el-tabs v-model="activeName">
          <el-tab-pane label="发信箱" name="send">
            <el-col style="margin-bottom: 50px" :lg="20">
              <el-button type="button" class="pubBtn3" @click="create">新建消息</el-button>
            </el-col>
            <el-table @row-click="rowClick" :header-cell-style="{ background: '#F3F8FE' }" :data="centerList" border
              style="width: 100%; margin: 20px 0">
              <el-table-column label="标题" width="400" align="center" prop="title"></el-table-column>
              <el-table-column label="时间" align="center" prop="ctime"></el-table-column>
              <el-table-column label="标签" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.tag" effect="dark" size="small" type="danger">{{ scope.row.tag }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="bnum" align="center" label="咨询量"></el-table-column>
              <el-table-column label="阅读量" align="center" prop="click"></el-table-column>

              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button class="cee" @click="
                    $router.push({
                      path: '/newsDetails',
                      query: { id: scope.row.id },
                    })
                  " type="text">查看</el-button>
                  <el-button v-if="exportName == 'admin'" class="cee" @click.stop="MessageExports(scope.row.id)"
                    type="text">导出</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.page" :page-size="page.page_row" layout="total, prev, pager, next, jumper"
                :total="parseInt(page.count)" align="left"></el-pagination>
            </div>
          </el-tab-pane>

          <el-tab-pane label="收信箱" name="receive">
            <consulting></consulting>
          </el-tab-pane>
        </el-tabs>

        <!-- <el-col
          v-for="(item, index) in centerList"
          :key="index"
          class="mr e-hover"
          :lg="24"
          :xl="24"
        >
          <el-col>
            <div @click.stop="goDetail(item.id)">
              <el-col :lg="1">
                <div class="news_inquiry">
                  <p class="contextSize">咨询</p>
                  <p class="Headline">{{ item.fnum }}</p>
                </div>
              </el-col>
              <el-col class="Mleft" :lg="15" :xl="15">
                <p class="context ell">
                  <el-tag
                    v-if="item.tag"
                    effect="dark"
                    size="small"
                    style="margin-right: 5px"
                    type="danger"
                    >{{ item.tag }}</el-tag
                  >{{ item.title }}
                </p>
                <div class="tagr">
                  <el-tag
                    style="margin-right: 20px"
                    v-for="tag in item.operate_key"
                    :type="tag.type"
                    >{{ tag.name }}</el-tag
                  >
                </div>
                <div class="time_box">
                  <span class="time">{{ item.ctime }}</span>
                  <span class="time">阅读量：{{ item.click }}</span>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-col>
        <el-col :xl="24">
        </el-col>-->
      </el-row>
      <el-row v-if="createHand">
        <el-col class="mr" :lg="20">
          <el-input v-model="input" placeholder="请输入标题"></el-input>
        </el-col>
        <el-col :lg="20">
          <el-input v-model="val" placeholder="请输入消息标签"></el-input>
        </el-col>
        <el-col class="mr" :lg="20">
          <Editor style="margin-top: 20px" :id="`test4`" v-model="desc" />
        </el-col>
        <el-col class="mr obj" :lg="20">
          <el-upload class="upload-demo" :action="`${VUE_APP_BASE_API}/v1/common/upload_local`" name="file"
            :on-remove="handleRemove" :on-success="handlesuccess" multiple :file-list="fileList">
            <el-button size="small" type="primary">点击上传附件</el-button>
          </el-upload>
        </el-col>
        <el-col class="mr" :lg="20">
          <el-select @change="handelChange" v-model="value" placeholder="请选择私信类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col v-if="seleobject == 0" class="mr" :lg="20">
          <p>选择发送对象({{ tags.length }}/10)</p>
        </el-col>
        <el-col v-if="seleobject == 0" class="mr" :lg="20">
          <el-tag style="margin-right: 10px" v-for="(tag, index) in tags" :key="tag.name" :effect="tag.effect"
            @click="addTag(index)" :type="tag.type">{{ tag.name }}</el-tag>
        </el-col>
        <el-col v-if="seleobject == 2" class="mr" :lg="20">
          <p>选择发送企业</p>
        </el-col>
        <el-col v-if="seleobject == 2" class="mr" :lg="20">
          <el-tag style="margin-right: 10px" v-for="(tag, index) in role_id" :key="tag.role_name" :effect="tag.effect"
            @click="addrole(index)" :type="tag.type">{{ tag.role_name }}</el-tag>
        </el-col>
        <el-col class="mr" :lg="20">
          <el-select style="width: 100%" clearable multiple v-if="seleobject == 1" @change="handelUser"
            v-model="searchValue" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading"
            placeholder="请选择或搜索用户">
            <el-option v-for="item in user" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :lg="20">
          <el-button type="button" class="pubBtn3" @click="add">确定</el-button>
          <el-button type="info" @click="createHand = false">取消</el-button>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  messageAdd,
  SettingKeywordsList,
  getUsers,
  getRoleAll,
  messageIndex,
  MessageExport
} from "@/api/admin";
import { VUE_APP_BASE_API } from "@/config";
import consulting from "@/views/administrators/consulting/consulting.vue";
import Editor from "@/components/Editor";
export default {
  components: {
    Editor,
    consulting,
  },
  data() {
    return {
      exportName: this.$store.state.user.name,
      activeName: "send",
      VUE_APP_BASE_API,
      selectUser: [],
      loading: false,
      createHand: false,
      searchValue: "",
      input: "",
      val: "",
      tags: [],
      role_id: [],
      centerList: [],
      fileList: [],
      desc: "",
      checkList: [],
      page: [],
      user: [],
      seleobject: null,
      annex: [],
      annex_name: [],
      options: [
        {
          value: "1",
          label: "选择私信用户",
        },
        {
          value: "0",
          label: "选择发送对象",
        },
        {
          value: "2",
          label: "全部企业",
        },
      ],
      value: "",
      checkroleId: [],
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      "rid",
    ]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    // handleChange(file, fileList) {
    //   // console.log(fileList);
    //   this.fileList = fileList.map(item=>);
    //   // console.log(this.fileList,666);
    // },
    MessageExports(id) {
      // MessageExport({ message_id: id }).then(res => {
      //   // console.log(res.data,'akjdhashdiadhiahdahsdi')
      //   const blob = new Blob([res.data]);
      //   const fileName = "信息导出.xls";
      //   const elink = document.createElement("a");
      //   elink.download = fileName;
      //   elink.style.display = "none";
      //   elink.href = URL.createObjectURL(blob);
      //   document.body.appendChild(elink);
      //   elink.click();
      //   URL.revokeObjectURL(elink.href); // 释放URL 对象
      //   document.body.removeChild(elink);
      // })
      window.open(`${VUE_APP_BASE_API}/v1/company/export?message_id=${id}`);
    },
    handleClick() {
      this.$router.push("/consulting");
    },
    handlesuccess(file) {
      // this.fileList.push(file.data.url)
      this.annex.push(file.data.url);
      this.annex_name.push(file.data.file_name);
      // console.log(this.annex);
    },
    handleRemove(file, fileList) {
      // console.log(file.response.data.url,fileList);
      if (this.annex.indexOf(file.response.data.url) != -1) {
        this.annex.splice(this.annex.indexOf(file.response.data.url), 1);
      }
    },
    async getData() {
      try {
        const res = await messageIndex();
        this.centerList = res.list;
        this.page = res.page;
        const key = await SettingKeywordsList();
        this.tags = key.list;
        this.user = await getUsers();
        this.role_id = await getRoleAll();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handelChange(val) {
      this.seleobject = val;
    },
    handelUser(val, name) {
      this.selectUser = val;
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await messageIndex({
          page: size,
        });
        this.centerList = res.list;
        this.page = res.page;
        document.documentElement.scrollTop = 0;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await messageIndex({
          page: currentPage,
        });
        this.centerList = res.list;
        this.page = res.page;
        document.documentElement.scrollTop = 0;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    create() {
      this.createHand = true;
    },

    async add() {
      try {
        await messageAdd({
          type: parseInt(this.seleobject),
          title: this.input,
          content: this.desc,
          operate_key: this.checkList,
          users: this.selectUser,
          tag: this.val,
          annex: this.annex,
          role_id: this.checkroleId,
          annex_name: this.annex_name,
        });
        this.createHand = false;
        this.getData();
        this.val = "";
        this.selectUser = [];
        this.desc = "";
        this.input = "";
        this.seleobject = "";
        this.checkList = [];
        this.$message.success("添加成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    addTag(index) {
      if (this.checkList.indexOf(this.tags[index].id) == -1) {
        this.checkList.push(this.tags[index].id);
        this.tags[index].type = "";
        this.tags[index].effect = "dark";
      } else {
        this.checkList.splice(this.checkList.indexOf(this.tags[index].id), 1);
        this.tags[index].effect = "plain";
        this.tags[index].type = "warning";
      }
    },
    addrole(index) {
      if (this.checkroleId.indexOf(this.role_id[index].id) == -1) {
        this.checkroleId.push(this.role_id[index].id);
        this.role_id[index].type = "";
        this.role_id[index].effect = "dark";
      } else {
        // console.log(this.role_id[index].id);
        this.checkroleId.splice(
          this.checkroleId.indexOf(this.role_id[index].id),
          1
        );
        this.role_id[index].effect = "plain";
        this.role_id[index].type = "warning";
      }
    },
    rowClick(row) {
      // console.log(row);
      this.$router.push({
        path: "/newsDetails",
        query: {
          id: row.id,
        },
      });
    },
    descVal(val) {
      this.desc = val;
    },
    remoteMethod(query) {
      // console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.user = this.user.filter((item) => {
            return item.company.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.user = [];
      }
    },
  },
};
</script>

<style scoped lang="less">
.mr {
  margin-bottom: 20px;
}

.mr:hover {
  background: #f4f5f7;
  cursor: pointer;
}

.obj {
  margin-top: 60px;
}

.news_inquiry {
  width: 80px;
  height: 110px;
  background: rgba(51, 191, 146, 1);
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    color: #fff;
    margin-bottom: 5px;
    word-break: break-all;
  }

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.context {
  padding-top: 5px;
}

.tagr {
  margin: 18px 0;
}

.news_inquiry {
  width: 80px;
  height: 110px;
  background: rgba(51, 191, 146, 1) !important;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    color: #fff;
    margin-bottom: 5px;
    background: rgba(51, 191, 146, 1) !important;
  }

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.context {
  padding-top: 5px;
}

.tagr {
  margin: 18px 0;
}

.Mleft {
  margin-left: 36px;
}

@media (max-width: 1360px) {
  .Mleft {
    margin-left: 50px;
  }
}

@media (max-width: 1280px) {
  .Mleft {
    margin-left: 80px;
  }
}
</style>
